<template>
	<view>
		<image src="/static/sybj.png" class="qjimg" mode=""></image>
		<view class="title">
			<image @click="fanhui" src="/static/zfh.png" :style="'margin-top:'+top+'px;'" mode=""></image>
			<view class="toptit" :style="'margin-top:'+top+'px;'">
				报修工单
			</view>
			<view class="" style="opacity: 0;">12</view>
		</view>
		<view class="box">
			<view class="box1">
				报修类型
			</view>
			<picker @change="bindPickerChange" :value="bxindex" :range="baoxiutype">
				<view class="box2">
					<view class="" style="margin-left: 10rpx;">
						{{baoxiutype[bxindex]}}
					</view>
					<image src="/static/xsjl.png" mode=""></image>
				</view>
			</picker>
			<view class="box1">
				报修时间
			</view>
			<view class="box2" @click="datetimex">
				<view class="" style="margin-left: 10rpx;">
					{{date}}
				</view>
				<image src="/static/xsjl.png" mode=""></image>
			</view>
			<view class="box1">
				报修项目
			</view>
			<picker :range="titlelist" range-key="title" @change="bindPickerChange1">
				<view class="box2">
					<view class="" style="margin-left: 10rpx;">
						{{title.title}}
					</view>
					<image src="/static/xsjl.png" mode=""></image>
				</view>
			</picker>
			<view class="box1">
				报修住址
			</view>
			<picker mode="multiSelector" @change="bindPickerChange2" @columnchange="gaibianzhuzhi"
				:value="buildingindex" :range="buildinglist" range-key="title">
				<view class="box2">
					<view class="" style="margin-left: 10rpx;">
						{{buildinglist[0][buildingindex[0]].title}}
						{{buildinglist[1][buildingindex[1]].title}}
						{{buildinglist[2][buildingindex[2]].title}}
					</view>
					<image src="/static/xsjl.png" mode=""></image>
				</view>
			</picker>
			<view class="box1">
				报修人姓名或手机号
			</view>
			<view class="box2">
				<input style="padding-left: 20rpx;width: 500rpx;" type="text" placeholder="请输入" v-model="keyword">
			</view>
			<uni-datetime-picker style="opacity: 0;" ref="picker" :end="endDate" v-model="range" type="daterange"
				@change="maskClick">
				<div></div>
			</uni-datetime-picker>

			<view class="box3">
				<view class="box3-1" @click="fanhui">
					取消
				</view>
				<view class="box3-2" @click="tijiao">
					确定
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {

			return {
				top: 0,
				bxindex: 0,
				baoxiutype: ['个人维修', '公共维修'],
				titlelist: [],
				range: [],
				endDate: '',
				title: {
					title: ''
				},
				roomId: '',
				picture: [],
				keyword: '',
				date: '',
				buildingindex: [0, 0, 0],
				buildinglist: [],
			}
		},
		watch: {
			range(newval) {
				console.log('范围选:', this.range);
				this.date = this.range[0] + ' ' + this.range[1]

			},
		},
		onLoad() {
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			// this.CustomBar = menuButtonInfo.bottom * 1 + 10
			this.top = menuButtonInfo.top * 1 + 6
			this.gettitle(1)
			this.getbuilding()
			this.getDate()
		},

		methods: {
			gaibianzhuzhi(e) {
				console.log(e.detail.column, e.detail.value);
				if (e.detail.column == 0) {
					this.$post('wuyecenter/getdanyuan', {
						buildingId: this.buildinglist[0][e.detail.value].id
					}, res => {
						this.buildinglist[1] = res.data.list[0]
						this.buildinglist[2] = res.data.list[1]
						this.$forceUpdate()
					})
				} else if (e.detail.column == 1) {
					this.$post('wuyecenter/getroomlist', {
						unitId: this.buildinglist[1][e.detail.value].unitId
					}, res => {
						this.buildinglist[2] = res.data.list
						this.$forceUpdate()
					})
				}
			},
			maskClick(e) {
				console.log('mask', e);

			},
			datetimex() {
				this.$refs.picker.show()
			},
			tijiao() {
				var pages = getCurrentPages();
				var prevPage = pages[pages.length - 2]; //上一个页面
				console.log(prevPage);
				prevPage.$vm.roomId = this.roomId
				prevPage.$vm.datetime = this.date
				prevPage.$vm.proid = this.title.id
				prevPage.$vm.keyword = this.keyword
				uni.navigateBack({
					delta: 1
				})
			},
			bindDateChange(e) {
				this.date = e.detail.value
			},
			fanhui() {
				uni.navigateBack({
					delta: 1
				})
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					// year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				this.endDate = `${year}-${month}-${day}`;
				console.log(this.endDate, 'shijian');
			},
			cimage() {
				const that = this
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						// console.log(JSON.stringify(res.tempFilePaths));
						const tempFilePaths = res.tempFilePaths
						console.log(that.picture, tempFilePaths, 'sdasd11');
						if (that.picture) {
							tempFilePaths.forEach(item => {
								that.picture.push(item)
							})
						} else {
							that.picture = tempFilePaths
						}
						console.log(that.picture, 'sdasd22');
					}
				});
			},
			bindPickerChange(e) {
				this.gettitle(e.detail.value + 1)
				this.title.title = ''
			},
			bindPickerChange1(e) {
				this.title = this.titlelist[e.detail.value]
			},
			bindPickerChange2(e) {
				console.log(e.detail.value);
				this.buildingindex = e.detail.value
				this.roomId = this.buildinglist[2][e.detail.value[2]].roomId
			},
			gettitle(e) {
				this.$post('wuyecenter/initbaoxiu', {
					type: e
				}, res => {
					this.titlelist = res.data.list
					res.data.list.forEach(item => {
						// this.title.push(item)
					})
				})
			},
			getbuilding() {
				this.$post('wuyecenter/getbuilding', {}, res => {
					this.buildinglist = res.data.list
					this.roomId = res.data.list[2][0].roomId
					// this.building[0]=res.data.list[0].[0].
				})
			},

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #e5e5e5;
	}

	.qjimg {
		width: 750rpx;
		height: 603rpx;
		position: absolute;
		top: 0;
		z-index: -1;
	}

	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;

		>image {
			width: 20rpx;
			height: 35rpx;
			margin-left: 30rpx;
		}
	}

	.toptit {
		text-align: center;
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #ffffff;
	}

	.box22 {
		width: 700rpx;
		margin: 50rpx auto;
		display: flex;
		// justify-content: space-evenly;

		>image {
			margin: 0 10rpx;
			width: 200rpx;
			height: 200rpx;
		}
	}

	.box {
		background-color: #ffffff;
		width: 100%;
		margin-top: 20rpx;
		overflow: hidden;
	}

	.box1 {
		width: 686rpx;
		margin: 0 auto;
		margin-top: 37rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #333333;
		line-height: 20rpx;
	}

	.box2 {
		width: 686rpx;
		height: 77rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		background-color: #eaf2ff;
		line-height: 77rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		>image {
			margin-right: 30rpx;
			width: 16rpx;
			height: 9rpx;
		}
	}

	.box3 {
		width: 686rpx;
		margin: 30rpx auto;
		display: flex;
		justify-content: space-between;
	}

	.box3-1 {
		width: 331rpx;
		height: 90rpx;
		border: #7caafd solid 2rpx;
		border-radius: 45rpx;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #000000;
		line-height: 90rpx;
		text-align: center;
	}

	.box3-2 {
		width: 331rpx;
		height: 90rpx;
		background-color: #2e79fd;
		border-radius: 45rpx;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #ffffff;
		line-height: 90rpx;
		text-align: center;
	}
</style>
